import axios from 'axios'
import React, { useState, useEffect } from 'react'
import { Swiper } from 'react-vant';
import {useNavigate} from 'react-router-dom'
import { Button } from 'react-vant';
import './index.css'
interface listType {
    title: string,
    pic: number,
    model: string,
    id: string,
    children: childType[]
}
interface childType {
    title:string,
    url: string[]
}
interface urlsType {
    url: string,
    id: string
}
const Home: React.FC = () => {
    const [list, setList] = useState<listType[]>([])
    const [urls, setUrls] = useState<urlsType[]>([])
    const navigate=useNavigate()
    const getAxiosList = async () => {
        const resp = await axios.get('/api/list')
        setList(resp.data.list)
        setUrls(resp.data.urls)
    }
    const textClick=(id:string)=>{
        navigate(`/text${id}`)
    }
    useEffect(() => {
        getAxiosList()
    }, [])
    return (
        <div className='home'>
            <div className="home-nav">
                <div className="demo-swiper">
                    <Swiper>
                        {
                            urls.map(v => {
                                // 在车系详情中展示对应的轮播图组件，并添加进去图片
                                return <Swiper.Item key={v.id}>
                                    <img src={v.url} alt="" />
                                </Swiper.Item>  
                            })
                        }
                    </Swiper>
                </div>
            </div>
            <div className="home-main">
                {
                    list.map(v => {
                        return <div key={v.id} className="item">
                            <div>{v.model} {v.title}</div>
                            <h3 style={{ color: 'red' }}>{v.pic}</h3>
                            {/* 点击品牌车型中任意一条数据跳转到车系详情 */}
                            <Button type='primary' onClick={()=>textClick(v.id)}>询问低价</Button>
                        </div>
                    })
                }
            </div>
        </div>
    )
}

export default Home